<template>
    <div class="add">
        <!-- Steps 步骤条 -->
        <el-steps :active="activeName - 0" finish-status="success">
            <el-step title="步骤 1"></el-step>
            <el-step title="步骤 2"></el-step>
            <el-step title="步骤 3"></el-step>
            <el-step title="步骤 4"></el-step>
            <el-step title="步骤 5"></el-step>
        </el-steps>
        <template>
            <!-- Form 表单 -->
            <el-form ref="AddForm" :model="AddForm" label-width="80px">
                <!-- Tabs 标签页 -->
                <el-tabs v-model="activeName" tab-position='left' style='margin-top:30px' @tab-click="handleClick">
                    <el-tab-pane label="基本信息" name="0">
                        <el-form-item label="商品名称" prop="goods_name">
                            <el-input v-model="AddForm.goods_name"></el-input>
                        </el-form-item>
                        <el-form-item label="商品价格" prop="goods_price">
                            <el-input v-model="AddForm.goods_price" type="number"></el-input>
                        </el-form-item>
                        <el-form-item label="商品重量" prop="goods_weight">
                            <el-input v-model="AddForm.goods_weight" type="number"></el-input>
                        </el-form-item>
                        <el-form-item label="商品数量" prop="goods_number">
                            <el-input v-model="AddForm.goods_number" type="number"></el-input>
                        </el-form-item>
                        <el-form-item label="商品分类" prop="goods_cat">
                            <el-cascader
                            :options="options"
                            :props="catprops"
                            @change='handleChange'
                            v-model="selectedOptions"
                            expand-trigger="hover">
                            </el-cascader>
                        </el-form-item>
                    </el-tab-pane>
                    <el-tab-pane label="商品参数" name="1">配置管理</el-tab-pane>
                    <el-tab-pane label="商品属性" name="2">
                      <!-- 高德地图 -->
                      <div class="amap-wrapper">
                        <el-amap class="amap-box" :vid="'amap-vue'"></el-amap>
                      </div>
                    </el-tab-pane>
                    <el-tab-pane label="商品图片" name="3">
                        <!-- 图片的上传 -->
                        <!-- 先设置action图片存放的路径 -->
                        <el-upload
                            class="upload-demo"
                            action="http://localhost:8888/api/private/v1/upload"
                            :headers="getToken()"
                            :on-preview="handlePreview"
                            :on-remove="handleRemove"
                            :on-success='uploadDone'
                            :before-upload='uploadBeforeValid'
                            list-type="picture">
                            <el-button size="small" type="primary">点击上传</el-button>
                            <div slot="tip" class="el-upload__tip" v-if='is_show'>只能上传jpg/png文件，且不超过500kb</div>
                        </el-upload>
                    </el-tab-pane>
                    <el-tab-pane label="商品内容" name="4">
                      <!-- 添加富文本编辑框 -->
                        <quill-editor
                          style="height:300px"
                          v-model="content"
                          ref="myQuillEditor"
                          :options="editorOption"
                          @blur="onEditorBlur($event)"
                          @focus="onEditorFocus($event)"
                          @ready="onEditorReady($event)">
                        </quill-editor>
                        <el-button type="success" @click='addGoodsSubmit' style="position:absolute;right:50px;bottom:100px">提交</el-button>
                    </el-tab-pane>
                </el-tabs>
            </el-form>
        </template>
        <!-- 图片预览框 -->
        <el-dialog title="提示" :visible.sync="previewdialogVisible" width="50%" >
            <img :src="uploadImgSrc" alt="">
        </el-dialog>
    </div>
</template>
<script>
import { getCategories, addGoods } from '@/api/index.js'
export default {
  data () {
    return {
      activeName: 0,
      //   验证第一个面板中的数据是否合法
      //   isValid: true,
      AddForm: {
        // 商品名称
        goods_name: '',
        // 选中的商品分类
        goods_cat: '1,3,6',
        // 商品价格
        goods_price: '',
        // 商品数量
        goods_number: '',
        // 商品重量
        goods_weight: '',
        // 商品的描述
        goods_introduce: '',
        // 商品的图片
        pics: [],
        // 商品的属性，包含了动态参数 和 静态参数
        attrs: []
      },
      content: '',
      editorOption: {},
      is_show: false,
      uploadImgSrc: '',
      previewdialogVisible: false,
      options: [],
      //   uploadHeaders: { Authorization: localStorage.getItem('mytoken') },   目前没什么用
      selectedOptions: [],
      catprops: {
        children: 'children',
        label: 'cat_name',
        value: 'cat_id'
      }
    }
  },
  methods: {
    handleClick (tab, event) {
    },
    // 1.获取token值, 获取到token值了才能存储到自己要访问的目标路径
    getToken () {
      var token = localStorage.getItem('mytoken')
      return {Authorization: token}
    },
    // 2.图片预览时触发的事件
    handlePreview (file) {
      //   console.log(file)
      this.previewdialogVisible = true
      //   注意:需要拼接路径
      this.uploadImgSrc = 'http://localhost:8888/' + file.response.data.tmp_path
    },
    // 3.图片上传成功时触发的事件
    uploadDone (file) {
      //   console.log(file)
      // 将当前上传成功的文件信息存储到数组中
      this.AddForm.pics.push({pic: file.data.tmp_path})
    },
    // 4.图片删除时触发的事件
    handleRemove (file, fileList) {
      // 判断file.response是否有值,没值的话不再继续执行代码
      if (!file.response) {
        return
      }
      // file:当前已经被删除的文件信息
      // fileList:当前组件中还剩余的文件信息
      //   console.log(file)
      //   //   console.log(fileList)
      var filepath = file.response.data.tmp_path
      //   console.log(filepath)

      // findIndex:可以查找指定数据的所在索引位置:它有一个回调函数,回调函数有一个参数,就是遍历数组时每次遍历到的成员,每次使用一个成员的数据进行函数的业务逻辑的计算,如果满足条件,则返回当前索引
      var index = this.AddForm.pics.findIndex(item => {
        return item.pic === filepath
      })
      //   console.log(index)
      // 使用splice方法删除对应索引的图片
      this.AddForm.pics.splice(index, 1)
    },
    // 5.上传图片之前的验证--图片大小
    uploadBeforeValid (file) {
      //   console.log(file)
      //   如果上传图片的大小大于 500000的话,is_show为true,显示提示用户的文字
      if (file.size > 500000) {
        this.is_show = true
        return false
      } else {
        this.is_show = false
      }
    },
    //  6. 页面加载开始实现选择项数据的渲染
    initList () {
      getCategories({type: 3})
        .then((res) => {
        //   console.log(res)
          this.options = res.data
        })
    },
    // 7.把选中的数据项以','分割成字符串
    handleChange (value) {
    //   console.log(value)
      //   选中的数据项以','分割成字符串
      this.AddForm.goods_cat = value.join(',')
    //   console.log(this.AddForm.goods_cat)  1,3,6
    },
    addGoodsSubmit () {
      console.log(this.AddForm)
      addGoods(this.AddForm)
        .then((res) => {
          console.log(res)
          if (res.meta.status === 201) {
            this.$message({
              type: 'success',
              message: res.meta.msg
            })
            // 添加成功后跳转到goods/list的页面
            this.$router.push('/goods/list')
          }
        })
    },
    onEditorBlur (quill) {
      console.log('editor blur!', quill)
    },
    onEditorFocus (quill) {
      console.log('editor focus!', quill)
    },
    onEditorReady (quill) {
      console.log('editor ready!', quill)
    }
  },
  mounted () {
    this.initList()
  }
}
</script>
<style lang="scss" scoped>
.amap-wrapper {
  width: 500px;
  height: 500px;
}
</style>
